<template>
  <div>
    <el-card>
      <!-- <div> -->
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="90px"
      >
        <el-form-item label="按季节筛选" prop="isReturn">
          <!-- <el-input v-model="queryParams.isReturn" placeholder="模板ID" clearable @keyup.enter.native="handleQuery" /> -->
          <el-radio-group
            v-model="queryParams.groupSeason"
            size="small"
            fill="#66b1ff"
            @change="changeReturn"
          >
            <el-radio :label="false">否</el-radio>
            <el-radio :label="true">是</el-radio>
            <!-- <el-radio :label="'是'">归还</el-radio>
          <el-radio :label="'否'">不归还</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="groupLabel">
          <el-select
            v-model="queryParams.groupLabel"
            placeholder="请选择分组"
            style="width: 150px"
            @change="getList"
          >
            <el-option
              v-for="dict in dict.type.sys_product_age"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="productSeason">
          <!-- <el-input v-model="form.productSeason" placeholder="请输入商品-季节" /> -->
          <el-select
            v-model="queryParams.itemList"
            placeholder="请选择商品-产品款号"
            clearable
            style="width: 250px"
            filterable
            remote
            :remote-method="getItem"
          >
            <el-option
              v-for="item in optionsItem"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="productSeason">
          <!-- <el-input v-model="form.productSeason" placeholder="请输入商品-季节" /> -->
          <el-select
            v-model="queryParams.skuList"
            placeholder="请选择商品-sku"
            filterable
            clearable
            allow-create
            remote
            :remote-method="getselectSkuLikeList"
            @change="getList"
          >
            <el-option
              v-for="(dict, index) in selectSkuLikeList"
              :key="index"
              :label="dict"
              :value="dict"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="dataDate">
          <el-date-picker
            clearable
            v-model="queryParams.dataDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="入仓日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" prop="transactionDate">
          <el-date-picker
            clearable
            v-model="queryParams.transactionDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="出仓日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <div slot="header" class="card-box" style="height: 20px">
        <el-col :span="2">
          <span style="font-weight: 600"
            ><i class="el-icon-collection"></i> 库龄详情</span
          >
        </el-col>
        <el-col :span="15">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="" prop="productSeason">
              <!-- <el-input v-model="form.productSeason" placeholder="请输入商品-季节" /> -->
              <el-select
                v-model="queryParams.productSeasonList"
                placeholder="请选择商品-季节"
                clearable
                multiple
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_jijie"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="firstLevelColumnList">
              <el-select
                v-model="queryParams.firstLevelColumnList"
                placeholder="请选择一级类目"
                multiple
                clearable
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_pl"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="secondLevelColumnList">
              <el-select
                v-model="queryParams.secondLevelColumnList"
                placeholder="请选择二级类目"
                multiple
                clearable
                filterable
              >
                <el-option
                  v-for="dict in dict.type.sys_product_secondary"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="threeLevelColumnList">
              <!-- <el-input v-model="queryParams.secondSource" placeholder="请输入三级类目" clearable
          @keyup.enter.native="handleQuery" /> -->
              <el-select
                v-model="queryParams.threeLevelColumnList"
                placeholder="请选择三级类目"
                multiple
                clearable
                filterable
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_cycle"
                  :key="dict.label"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini"
                >搜索</el-button
              >
              <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            > -->
            </el-form-item>
          </el-form>
        </el-col>
      </div>

      <u-table
        :data="tableData"
        :height="height"
        use-virtual
        :row-height="rowHeight"
        border
      >
        <u-table-column type="index" width="100" fixed />

        <u-table-column align="center" label="库龄分布" width="450" fixed>
          <u-table-column
            v-if="this.queryParams.groupLabel == 'item'"
            align="center"
            prop="item"
            label="产品款号"
            width="150"
          >
          </u-table-column>
          <u-table-column
            v-if="this.queryParams.groupLabel == 'sku'"
            align="center"
            prop="sku"
            label="商品SKU编号"
            width="150"
          >
          </u-table-column>
          <!-- <u-table-column
          align="center"
          prop="productSeason"
          label="产品季节"
          width="150"
        >
        </u-table-column>
      <u-table-column
          align="center"
          prop="firstLevelColumn"
          label="一级"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="secondLevelColumn"
          label="二级"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="threeLevelColumn"
          label="三级"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="firstLevelColumn"
          label="颜色"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="secondLevelColumn"
          label="尺码"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="threeLevelColumn"
          label="主图"
          width="150"
        >
        </u-table-column>
      -->
          <u-table-column
            align="center"
            prop="earlyOInWarehouseDate"
            label="最近入库日期"
            width="150"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="earlyOutWarehouseDate"
            label="最近出库日期"
            width="150"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="0~30天">
          <u-table-column
            align="center"
            prop="inventoryQuantity0"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount0"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="31~60天">
          <u-table-column
            align="center"
            prop="inventoryQuantity30"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount30"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="61~90天">
          <u-table-column
            align="center"
            prop="inventoryQuantity60"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount60"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="91~120天">
          <u-table-column
            align="center"
            prop="inventoryQuantity90"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount90"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="121~150天">
          <u-table-column
            align="center"
            prop="inventoryQuantity120"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount120"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="151~180天">
          <u-table-column
            align="center"
            prop="inventoryQuantity150"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount150"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="181~240天">
          <u-table-column
            align="center"
            prop="inventoryQuantity180"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount180"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="241~300天">
          <u-table-column
            align="center"
            prop="inventoryQuantity240"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount240"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="300~365天">
          <u-table-column
            align="center"
            prop="inventoryQuantity300"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount300"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="1~2年">
          <u-table-column
            align="center"
            prop="inventoryQuantity1Y"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount1Y"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="2~3年">
          <u-table-column
            align="center"
            prop="inventoryQuantity2Y"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount2Y"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="3年以上">
          <u-table-column
            align="center"
            prop="inventoryQuantity3Y"
            label="库存数量"
            width="100"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount3Y"
            label="库存价值"
            width="100"
          >
          </u-table-column>
        </u-table-column>
      </u-table>
    </el-card>
  </div>
</template>

  <script>
import {
  listBiInventoryAgeDwd,
  getBiInventoryAgeDwd,
  delBiInventoryAgeDwd,
  addBiInventoryAgeDwd,
  updateBiInventoryAgeDwd,
  synData,
  inventoryAgeDetail,
  queryContentByKey,
  selectSkuLike,
} from "@/api/Warehouse/BiInventoryAgeDwd";
export default {
  dicts: [
    "sys_product_age",
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
  ],
  data() {
    return {
      selectSkuLikeList: [],
      optionsItem: [],
      height: 700,
      rowHeight: 50,
      tableData: [],
      // tableData: Array.from({ length: 5 }, (_, idx) => ({
      //   id: idx + 1,
      //   date: "2016-05-03",
      //   name: "王小虎",
      //   province: "上海",
      //   city: "普陀区",
      //   address: "上海市普陀区金沙江路 1518 弄",
      //   zip: 200333,
      // })),
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        groupLabel: "item",
        groupSeason: false,
        // sku: null,
        // inventoryAgeDays: null,
        // inventoryAgeDateRange: null,
        // inventoryQuantity: null,
        // inventoryAmount: null,
        // firstLevelColumnList: null,
        // secondLevelColumnList: null,
        // threeLevelColumnList: null,
        // productSeasonList: null,
        // groupLabel: null,
        // itemList: null,
        // skuList: null,
        // dataDate: null,
        // transactionDate: null,
      },
    };
  },
  /** 一级 */
  // private List<String> firstLevelColumnList;
  // /** 一级 */
  // private List<String> secondLevelColumnList;

  // /** 三级 */
  // private List<String> threeLevelColumnList;

  // /** 产品季节 */
  // private List<String> productSeasonList;

  // /** 产品款号 */
  // private List<String> itemList;

  // /** sku */
  // private List<String> skuList;
  // private String sku;

  // /** 分组 */
  // private String groupLabel;

  // /** 是否按季节分组 */
  // private Boolean groupSeason;

  // /** 入仓日期 */
  // private Date dataDate;

  // /**出仓日期*/
  // private Date transactionDate;
  created() {
    // console.log(JSON.stringify(this.tableData));
    this.getList();
  },
  methods: {
    //是否按季节分组
    changeReturn() {
      if (this.queryParams.groupSeason == false) {
        this.queryParams.productSeasonList = null;
        this.getList();
      }
    },
    //sku列表
    getselectSkuLikeList(key) {
      selectSkuLike({ value: key }).then((response) => {
        this.selectSkuLikeList = response;
      });
    },
    getItem(key) {
      console.log(JSON.stringify(key));
      // this.loading = true;
      // return
      queryContentByKey({ keyWord: key }).then((res) => {
        // this.loading = false;
        this.optionsItem = res.data;
        // console.log(JSON.stringify(this.options));
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // this.queryParams.pageNum = 1;
      // this.queryParams.pageSize = 10;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {};
      this.queryParams.groupLabel = "item";
      this.handleQuery();
    },
    /** 查询库龄列表 */
    getList() {
      // this.loading = true;
      inventoryAgeDetail(this.queryParams).then((response) => {
        this.tableData = response;
        // this.total = response.total;
        // this.loading = false;
      });
    },
  },
};
</script>

    /** 一级 */
    @Excel(name = "一级")
    private String firstLevelColumn;
    /** 一级 */
    @Excel(name = "二级")
    private String secondLevelColumn;

    /** 三级 */
    @Excel(name = "三级")
    private String threeLevelColumn;

    /** 产品季节 */
    @Excel(name = "产品季节")
    private String productSeason;

    /** 产品款号 */
    @Excel(name = "产品款号")
    private String item;

    /** sku */
    @Excel(name = "sku")
    private String sku;

    /** 最近入库时间 */
    @Excel(name = "最近入库时间")
    private Date earlyOInWarehouseDate;

    /** 最近出库时间 */
    @Excel(name = "最近出库时间")
    private Date earlyOutWarehouseDate;

    /** 0~30天库存量 */
    @Excel(name = " 0~30天库存量")
    private Integer inventoryQuantity;

    /** 0~30天库存金额 */
    @Excel(name = "0~30天库存金额")
    private Double inventoryAmount;

    /** 31~60天库存量 */
    @Excel(name = "31~60天库存量")
    private Integer inventoryQuantity30;

    /** 31~60天库存金额 */
    @Excel(name = "31~60天库存金额")
    private Double inventoryAmount30;

    /** 61~90天库存量 */
    @Excel(name = "61~90天库存量")
    private Integer inventoryQuantity60;

    /** 61~90天库存金额 */
    @Excel(name = "61~90天库存金额")
    private Double inventoryAmount60;

    /** 91~120天库存量 */
    @Excel(name = "91~120天库存量")
    private Integer inventoryQuantity90;

    /** 91~120天库存金额 */
    @Excel(name = "91~120天库存金额")
    private Double inventoryAmount90;

    /** 121~150天库存量 */
    @Excel(name = "121~150天库存量")
    private Integer inventoryQuantity120;

    /** 121~150天库存金额 */
    @Excel(name = "121~150天库存金额")
    private Double inventoryAmount120;

    /** 151~180天库存量 */
    @Excel(name = "151~180天库存量")
    private Integer inventoryQuantity150;

    /** 151~180天库存金额 */
    @Excel(name = "151~180天库存金额")
    private Double inventoryAmount150;

    /** 181~240天库存量 */
    @Excel(name = "181~240天库存量")
    private Integer inventoryQuantity180;

    /** 181~240天库存金额 */
    @Excel(name = "181~240天库存金额")
    private Double inventoryAmount180;

    /** 241~300天库存量 */
    @Excel(name = "241~300天库存量")
    private Integer inventoryQuantity240;

    /** 241~300天库存金额 */
    @Excel(name = "241~300天库存金额")
    private Double inventoryAmount240;

    /** 300~365天库存量 */
    @Excel(name = "300~365天库存量")
    private Integer inventoryQuantity300;

    /** 300~365天库存金额 */
    @Excel(name = "300~365天库存金额")
    private Double inventoryAmount300;

    /** 1~2年库存量 */
    @Excel(name = "1~2年库存量")
    private Integer inventoryQuantity1Y;

    /** 1~2年库存金额 */
    @Excel(name = "1~2年库存金额")
    private Double inventoryAmount1Y;

    /** 2~3年库存量 */
    @Excel(name = "2~3年库存量")
    private Integer inventoryQuantity2Y;

    /** 2~3年库存金额 */
    @Excel(name = "2~3年库存金额")
    private Double inventoryAmount2Y;

    /** 3年以上库存量 */
    @Excel(name = "3年以上库存量")
    private Integer inventoryQuantity3Y;

    /** 3年以上库存金额 */
    @Excel(name = "3年以上库存金额")
    private Double inventoryAmount3Y;
sku/item/三级/二级/一级